<template>
<div class="navbar">
    <div class="top">
        <!-- 返回按钮（单独处理，无激活态） -->
        <div class="nav-item" @click="goBack">
            <el-icon>
                <ArrowLeft />
            </el-icon>
        </div>
        <!-- 首页 -->
        <div class="nav-item" @click="handleClick('/shouye', 0)" :class="{ active: currentActive === 0 }">
            <el-icon>
                <HomeFilled />
            </el-icon>
            <p>首页</p>
        </div>
        <!-- 精选 -->
        <div class="nav-item" @click="handleClick('/jingxuan', 1)" :class="{ active: currentActive === 1 }">
            <el-icon>
                <Flag />
            </el-icon>
            <p>精选</p>
        </div>
        <!-- 动态 -->
        <div class="nav-item" @click="handleClick('/dongtai', 2)" :class="{ active: currentActive === 2 }">
            <el-icon>
                <BellFilled />
            </el-icon>
            <p>动态</p>
        </div>
        <!-- 我的 -->
        <div class="nav-item" @click="handleClick('/wode', 3)" :class="{ active: currentActive === 3 }">
            <UserFilled></UserFilled>
            <p>我的</p>
        </div>
    </div>
    <div class="spacer"></div>
    <div class="bottom">
        <!-- 上传（可跳转，示例跳设置） -->
        <div class="nav-item">
            <el-icon>
                <Upload />
            </el-icon>
        </div>
        <!-- 聊天 -->
        <div class="nav-item">
            <el-icon>
                <ChatDotRound />
            </el-icon>
        </div>
        <div class="nav-item">
            <el-icon>
                <Opportunity />
            </el-icon>
        </div>
        <!-- 设置 -->
        <div class="nav-item" @click="handleClick('/shezhi', 4)" :class="{ active: currentActive === 4 }">
            <el-icon>
                <Setting />
            </el-icon>
        </div>
    </div>
</div>
</template>

<script setup>
import { ArrowLeft, Setting, HomeFilled, Upload, ChatDotRound, Flag, BellFilled, UserFilled, Opportunity } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
import { ref } from 'vue';

const router = useRouter();
// 记录当前激活项的索引（0~4 对应顶部 4 个可激活项 + 底部设置）
const currentActive = ref(-1);

const handleClick = (path, index) => {
    router.push(path);    // 跳转路由
    currentActive.value = index; // 更新激活项
};

const goBack = () => {
    router.back();
};
</script>

<style scoped>
.navbar {
    display: flex;
    flex-direction: column;
    background: #eaecee;
    border-right: 1px solid #eee;
    height: 100vh;
    width: 60px;
    position: fixed;
    left: 0;
    top: 0;
    padding: 16px 0;
}

.top,
.bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 0;
    cursor: pointer;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.nav-item:hover>* {
    color: #ff6699;
}

/* 激活态样式 */
.nav-item.active>* {
    color: #ff6699;
}

.spacer {
    flex: 1;
}

.el-icon {
    font-size: 22px;
}

p {
    margin: 0;
    font-size: 12px;
    color: #606266;
}
</style>